/*Media Query For Custom Desktop*/

@media screen and (max-width:360px){
    


    #logo{
        display: block;
        color:rgb(0, 250, 62);
    
    }
}
nav{
    background-color:rgba(128, 128, 128, 0.753);
   /* background-color:rgba(128, 128, 128, 0.541);*/
    padding-top:1px;
    padding-left: 20px;
    margin: -10px;
    margin-top: -30px;
    margin-right:-50px;   
    
}

#logo{
    height:100px;
    width:100px;
    margin-top:15px;
    margin-left: -25px;
    margin-bottom:-15px;
  
}

/*#search{
    float: right;
    margin-top: -119px;
    margin-right:15px;
    height:35px;
    width:35px;
}*/


h1{
    color:white;
    font-family:sans-serif;
    font-size: 50px; 
    padding-bottom: -60px;
     margin-left:50px;
     margin-top: -45px;   
  
}

h2{
    color:blue;
    font-family:sans-serif;
    font-weight:lighter;
    font-size:30px;
    text-decoration-line: underline;
}

p{
    color:rgb(14, 13, 13);
    font-family:sans-serif;
    margin-top:-50px;
    font-size: 20px;
}

#button{
background-color:rgb(31, 141, 231);
color: white;
border-style:none;
font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
padding:10px;
margin:10px;
font-size:15px;
border-radius:3px;
text-align: center;
}

#create{
   
    border-radius:3px;
    text-align: center; 
    padding-left: -10px;
}


input{
    block-size:20px;
    width:225px;
    border-radius: -30px;
    padding: 5px;
    padding-left:15px;
    margin: 5px;
    outline-color:rgb(10, 167, 230);
    border-radius: 3px;
   /* border: 1px solid;*/
    }

/*.footer{
background-color:rgb(148, 146, 146);
color:white;
position:;
left: 0;
bottom:0;
width:100%;
height:100px;
}*/

/*#footer{
    position:fixed;
    background-color:gray;
    width:auto;
    height:100px;
   margin-bottom:-10px;
width:100%;
height:100px;
color:white;
}*/

/*padding: 15px;
margin-bottom:-10px;
margin-right:-50px;
margin-left: -10px;*/


/*footer{
  position: fixed;
  left: 0;
  bottom:0;
  bottom:0;
  width:100%;
  background-color:blue;
}*/

button3{
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    background-color: blue;
    color: white;
    border-radius: none;
    padding: 100px;
    font-size:15px;
    position:fixed;
}

h3{
font-size: 35px;
color:rgba(0, 0, 0, 0.76);
font-family:sans-serif;
font-weight:lighter;
margin-top: 6px;
}

#file{
    display: none;
}

#frame{
    border-radius:5px;
}

label
{
    font-weight: lighter;
    font-family: sans-serif;
    font-size:15px;
    color: rgba(0, 0, 0, 0.699);
}


h4{
    font-weight: lighter;
    font-size: 30px;
    color: black;
    font-family: sans-serif;
    margin-bottom: -10px;
}

    input.search{
    float: right;
    padding: 10px;
}

p1{
    margin:-10px;
    color:rgb(0, 0, 0);
    font-family: sans-serif;
    font-size: 20px;
    padding: 10px;
    margin: -30px;  
}

p2{
    color:rgb(0, 0, 0);
    font-family:sans-serif;
padding-bottom: 10px;
    font-size: 20px;
    margin-bottom: -30px;
}

p3{
    color:rgb(0, 0, 0);
    word-warp:break-word;
    font-family:sans-serif;
margin-bottom:10px;
    font-size: 25px;
}


p5{

    color:white;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-weight: lighter;
    
}
div.user{
padding:30px;
}

#Setting{
    height: 35px;
    width: 35px; 
    padding-right:-1275px;

}

/*.Activities{
   /* height: 200px;
    width: 220px;
margin-right:15px;

left: 0;
bottom:0;
filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, 0.849));
}*/



div.search{
padding-left:980px;
margin-top: -100px;
margin-bottom: -10px;

}

#Message{
height: 100px;
width: 100px;
padding-bottom: 30px;
padding-left: 20px;
}

#Notifications{
height: 100px;
width: 90px;
padding-bottom: 30px;
padding-left: 20px;
}

#Other{
height:100px;
width:100px;
padding-bottom: 30px;
margin-left:-10px;
}

p6{
    color:rgba(0, 0, 0, 0.904);
    font-family: sans-serif;
    font-weight: lighter;
}

pMessage{
display:none;
}

/*pNotifications{
padding-left: ;
padding-bottom: ;
}

pOther{
padding-left: ;
padding-bottom: ;
}*/

#Details{
    font-family: sans-serif;
    font-size: 15px;
    outline-color:rgb(10, 167, 230);
}

.Gender{
    block-size:5px;
    margin:1px;
 margin-right: 10px;
 padding-top: -10px;
}

/*.List{
 height: 250px;
    width: 500px;
    margin-top:30px;
    box-shadow: 0px 0px 10px 1px gray;
    border-radius: 10px;
    margin-bottom: 500px;
}*/
.list-profile{
    height: 100px;
    width: 100px;
    border-radius: 50px;
margin-top: 30px;
}

#submit{
    background-color:rgb(10, 167, 230);
    font-family: sans-serif;
    font-weight: lighter;
    color: white;
}

#Messages_Send{
    background-color: white;
    height:15px;
    width:auto;
    border: 1px 1px 1px 1px solid black;
}

#User-1{
    margin-left: 5px;
            margin-bottom: 10px;
            padding:15px;
            background-color:rgb(57, 151, 240);
            width:fit-content;
            height:fit-content;
            text-align: left;
            font: 400 .9em 'Open Sans', sans-serif;
            border-radius: 10px;
            color:white;
            box-shadow:0px 0px 15px 3px gray;
            float: right;
}

#User-2{
    margin-right:5px;
    margin-bottom: 10px;
    padding:15px;
    background-color:lightgrey;
    width:fit-content;
    height:fit-content;
    text-align:left;
    font-size: 15px;
    font-family: sans-serif;
    color:rgb(70, 67, 67);
    border-radius:10px;
    box-shadow:0px 0px 15px 2px gray;
    float: left;
}

/*Media Query*/

/*Extra Small Device (Portrait Phones, Less Than 576px)*/
@media (max-width:480px){
    body{
        overflow-y: hidden;
    }
    
    nav{
 background-color:rgba(121, 120, 120, 0.712);
      height:85px;
      width:100%;
      margin-bottom:35px;
    }

    #logo{
       
        height:65px;
        width:65px;
        margin-top:20px;
        margin-left:-20px;
        margin-bottom:-10px;
      
    }
    
    h3{
        font-size: 25px;
        color:rgba(0, 0, 0, 0.76);
        font-family:sans-serif;
        font-weight:400;
        margin-top: -23px;
        padding-bottom:75px;
        }

        h1{
            color:white;
            font-family:sans-serif;
            font-size:35px; 
            padding-bottom: -30px;
             margin-left:32px;
             margin-top:-38px; 
          
        }

        p1{
            margin-left:50px;
            color:rgb(0, 0, 0);
            font-family: sans-serif;
            font-size: 18px;
            padding: 10px;
            margin-left:-35px;
           
        }
        

        input{
            block-size:25px;
            width:225px;
            border-radius: -30px;
            padding: 5px;
            padding-right:30px;
            margin: 5px;
            margin-left:15px;
            outline-color:rgb(10, 167, 230);
            border-radius: 3px;
           /* border: 1px solid;*/
            }

            #button{
                background-color:rgb(31, 141, 231);
                color: white;
                border-style:none;
                font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
                padding:10px;
                margin:10px;
                font-size:15px;
                border-radius:3px;
                text-align: center;
                height:40px;
                font-size:15px;
                padding-top:10px;
            }  

#body{
    overflow-y: hidden;
}

#Create{
    margin-top:75px;
}

}